<template>
	<view class="marketing-detail">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<view class="marketing">
			<view class="cover">
				<image :src="$imageUrl(detail.img)" mode="aspectFill"></image>
			</view>
			<view class="title">{{detail.title}}</view>

			<view class="static">
				<view class="item">
					<view class="value">{{ detail.num }}</view>
					<view class="label">目标人数</view>
				</view>
				<view class="item">
					<view class="value">{{detail.use_num}}</view>
					<view class="label">参与人数</view>
				</view>
			</view>

			<view class="content">
				<gyd-tabs :list="tabsList" @clickItem="changeTab"></gyd-tabs>

				<!--奖励条件-->
				<view class="rule" v-if="state.current == 0">
					<view class="item">
						<view class="label">目标人数:</view>
						<view class="value">{{detail.num}}</view>
					</view>
					<view class="item">
						<view class="label">首购桶数:</view>
						<view class="value">{{detail.bucket_num}}</view>
					</view>
				</view>

				<!--活动说明-->
				<view class="explain" v-if="state.current == 1">{{ detail.remark }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '活动详情',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		market_id: 0,
		tabsList: ['奖励条件', '活动说明'],
		current: 0,
		detail: {},
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
			state.market_id = opt.id;
		}
		getDetail();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function getDetail() {
		state.detail = {
			id: 1,
			img: '/uploads/files/202509/12/file44d53f5a868d10215b32aeeff3b3b16e4505.jpg',
			title: '娃哈哈促销活动',
			store: {
				name: '云海水站'
			},
			remark: '森岛帆高水电费水电费',
			num: 10,
			use_num: 1,
			bucket_num: 100,
			create_time: '2025-10-23 16:25:13'
		};
	}

	function changeTab(index) {
		console.log('切换Tab', index);
		state.current = index;
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		market_id,
		tabsList,
		current,
		detail,
	} = toRefs(state);
</script>

<style lang="scss">
	.marketing-detail {
		padding: $m24;

		.marketing {
			.cover {
				width: 100%;
				height: 250rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.title {
				padding: $m24 0;
				font-size: 34rpx;
				color: $main-color;
				text-align: center;
			}

			.static {
				height: 80rpx;
				padding: $m24;
				background: linear-gradient(180deg, rgba(199, 224, 255, 0.5) 0%, rgba(199, 224, 255, 0.2) 77%, rgba(255, 255, 255, 0) 100%);
				background-size: 100% 100%;
				border-radius: 10rpx;
				display: flex;
				justify-content: space-around;

				.item {
					text-align: center;

					.value {
						font-size: 36rpx;
						color: $primary-color;
					}

					.label {}
				}
			}

			.content {
				margin: $m24 0;
				line-height: 48rpx;
				font-size: 28rpx;
				color: $content-color;

				.rule {
					background: #fff;
					padding: $m24;

					.item {
						display: flex;
						background: #f7f7fb;
						margin: 0 0 $m16 0;
						padding: $m8 $m16;

						.label {
							width: 160rpx;
						}

						.value {
							flex: 1;
						}
					}
				}

				.explain {
					background: #fff;
					padding: $m24;
				}
			}
		}
	}
</style>